<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒杀活动</title>
    <script src="/static/vue.min.js"></script>
    <script src="/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" href="/static/css/css.css">
    <link rel="stylesheet" type="text/css" href="/static/lib-master/theme-chalk/index.css"/>
    <script src="/static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/MyTools.js"></script>
</head>

<body>
<div id="divs">
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
              style="width: 100%;" id="ttid">
        <el-table-column type="index" :index="this.indexStartNum" label="序号" align="center" width="50">
        </el-table-column>
        <el-table-column prop="goodsImg" header-align="center" align="center" label="商品图片">
            <template slot-scope="scope">
                <img width="80px" :src="scope.row.goodsImg"/>
            </template>
        </el-table-column>
        <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称">
        </el-table-column>
        <el-table-column prop="goodsPrice" header-align="center" align="center" label="商品原价">
            <template slot-scope="scope">
                ￥<span>{{scope.row.goodsPrice}}元</span>
            </template>
        </el-table-column>
        <el-table-column prop="seckilPrice" header-align="center" align="center" label="秒杀价格">
            <template slot-scope="scope">
                ￥<span style="color: red;">{{scope.row.seckilPrice}}元</span>
            </template>
        </el-table-column>
        <el-table-column prop="seckilKucun" header-align="center" align="center" label="秒杀库存">
        </el-table-column>
        <el-table-column prop="seckilDescribe" header-align="center" align="center" label="分享描述">
        </el-table-column>
        <el-table-column prop="seckilStatus" header-align="center" align="center" label="秒杀状态">
            <template slot-scope="scope">
                    <span v-if="scope.row.seckilStatus==1">
                        <el-tag type="success">进行中</el-tag>
                    </span>
                <span v-if="scope.row.seckilStatus==0">
                        <el-tag type="success">已结束</el-tag>
                    </span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
                <el-button size="small" @click="toseckol(scope)" type="info">详情</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="秒杀活动" :visible.sync="dialogFormVisible">

        <el-form :model="dataForm" label-width="80px">
            <el-form-item label="商品名称" prop="goodsName">
                <span>{{dataForm.goodsName}}</span>
            </el-form-item>
            <el-form-item label="商品价格" prop="goodsPrice">
                <span>{{dataForm.goodsPrice}}</span>
            </el-form-item>
            <el-form-item label="商品库存" prop="goodsKucun">
                <span>{{dataForm.goodsKucun}}</span>
            </el-form-item>
            <el-form-item label="商品图片" prop="goodsImg">
                <img :src="dataForm.goodsImg">
            </el-form-item>
            <el-form-item label="秒杀价格" prop="seckilPrice">
                <span>{{dataForm.seckilPrice}}</span>
            </el-form-item>
            <el-form-item label="秒杀库存" prop="seckilKucun">
                <span>{{dataForm.seckilKucun}}</span>
            </el-form-item>
            <el-form-item label="开始时间" prop="seckilStartAt">
                <span>{{dataForm.seckilStartAt}}</span>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">立即抢购</el-button>
        </div>
        <div id="bdiv">
            <span>00</span>:<span>00</span>:<span>00</span>
        </div>
    </el-dialog>

</div>

</body>

<script>
    window.addEventListener('load', function (ev) {
        var hour = myTool.$('bdiv').children[0], min = myTool.$('bdiv').children[1], sec = myTool.$('bdiv').children[2];
        var time = 800;
        var timer = setInterval(function () {
            time--;
            hour.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).hour);
            min.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).min);
            sec.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).second);
            if (time === 0) {
                clearInterval(timer);
            }
        }, 1000);
    }, false);
</script>

<script>
    new Vue({
        el: "#divs",
        data() {
            return {
                dataForm: {
                    key: ''
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                userId: "",
                formLabelWidth: '120px',
                dialogTableVisible: false,
                dialogFormVisible: false,
                dataForm: [],

            }
        },
        created() {
            this.userId = [[${userId}]]
            this.getDataList()
        },
        methods: {
            toseckol(scope) {
                this.dialogFormVisible = true
                console.log(scope)
                this.dataForm = scope.row
            },
            // 获取数据列表
            getDataList() {
                console.log((this.userId))
                this.dataListLoading = true
                axios.get("http://localhost:88/api/seckil/seckill/list").then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list
                        this.totalPage = data.page.totalCount
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            }
        }
    })
</script>

</html>